<template>
	<view class="r_content">
		<view class="login_box">
			<view class="form_box">
				<view class="input_box">
					<text class="txt1">真实姓名</text>
					<input type="text" :disabled="isCert == 0" placeholder-class="account-txt" v-model="params.userName" class="uni-input" placeholder="请输入您的姓名" />
				</view>
			</view>
			<view class="form_box">
				<view class="input_box">
					<text class="txt1">身份证号</text>
					<input type="text" :disabled="isCert == 0" placeholder-class="account-txt" @blur="checkSfz(params.idCard)" v-model="params.idCard" class="uni-input" placeholder="请输入您的身份证号码" />
				</view>
			</view>

			<view class="form_box">
				<view class="input_box" :style="{width: isCert == 0 ? '100%': 'calc(100% - 224rpx);'}">
					<text class="txt1">手机号</text>
					<input type="text" :disabled="params.mobileNo!=''" placeholder-class="account-txt" v-model="params.mobileNo" class="uni-input" placeholder="请输入您的手机号码" />
				</view>
				<view v-if="isCert == 1" class="register_yzms" :class="{'register_disabled': disabled}" @click="getCode" :disabled="disabled">
					  {{countdown}} <text v-if="timestatus">秒重获</text>
				</view>
			</view>
			<view class="form_box" v-if="isCert == 1">
				<view class="input_box">
					<text class="txt1">验证码</text>
					<input type="number" placeholder-class="account-txt" v-model="params.smsCode" class="uni-input input_yzm"
					 placeholder="请输入短信验证码" />
				</view>
			</view>

			<view class="save_btn" v-if="isCert == 1">
				<button type="primary" class="btn_pri" @click="toResite">{{isCert == 1?'提交认证':'提交修改'}}</button>
			</view>
			<view style="margin-top: 30rpx;">
				<text class="tips">温馨提示：一旦实名认证，将不可自行更改，需联系客服进行修改，请输入本人的正确信息。</text>
			</view>
		</view>
		<custom-modal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'/>
		<tmcModal :isShow="showMcModal1" :content="content1" :showCancel="false" :title="title1" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {
		updateIDCard,sendSmsCode
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast,
		isCardId
	} from '../../common/js/util.js'
	import customModal from '../../components/custom-modal/custom-modal.vue';
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				params: {
					userName: '',
					idCard: '',
					mobileNo: '',
					smsCode: ''
				},
				idCard: '',
				isCert: 1,
				userName: '',
				mobileNo: '',
				userId: uni.getStorageSync('s_userId'),
				numberCode: 60,
				disabled: false,
				countdown: '获取验证码',
				timestatus: false,
				userInfo: {},
				showMcModal: false,
				title: '',
				content: '',
				pageUrl: '',
				okBtn: '',
				content1: '',
				title1: '',
				showMcModal1: false,
				type: 'toPage'
			}
		},
		components: {
			customModal,
			tmcModal
		},
		onLoad(option) {
			this.mobileNo = this.params.mobileNo = uni.getStorageSync('s_mobile')
			if(option.user){
				this.userInfo = JSON.parse(option.user)
			}
			if(option.isCert == 0){
				this.isCert = option.isCert
				this.idCard = this.params.idCard = option.idCard
				this.userName = this.params.userName = option.realName
			}
			// this.getCode()
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				if(this.type == 'toPage'){
					uni.navigateTo({
						url: this.pageUrl
					})
				}else if(this.type == 'pageBack'){
					uni.navigateBack({
						delta: 1
					})
				}
			},
			queren() {
				this.showMcModal1 = false
			},
			showTxt(content, title='温馨提示') {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			checkSfz(num) {
				let _this = this
				if(num == ''){ return }
				isCardId(num, _this);
			},
			getCode() {
				var that = this;
				if (this.disabled) {
					return
				}
				if (that.params.mobileNo == '') {
					_showToast('请输入手机号码')
				} else {
					uni.showLoading();
					that.disabled = true; //禁用点击
					sendSmsCode({
						mobileNo: this.params.mobileNo
					}).then(res => {
						if (res.resultCode == 0) {
							uni.hideLoading()
							_showToast('获取验证码成功')
							that.countdown = 60;
							that.timestatus = true;
							that.clear = setInterval(that.countDown, 1000);
						} else {
							uni.hideLoading()
							_showToast('获取验证码失败')
							that.disabled = false; //获取失败开启点击
						}
					}).catch(err => {
						that.title = '温馨提示'
						that.content = '系统错误!'
						that.okBtn = '确定'
						that.showMcModal = true
						that.type = 'hint'
						that.disabled = false; //获取失败开启点击
					})
				}
			},
			countDown() {
				var that = this;
				if (!that.countdown) {
					that.disabled = false;
					that.timestatus = false;
					that.countdown = '获取验证码';
					clearInterval(that.clear);
				} else {
					--that.countdown;
				}
			},
			toResite() {
				if(this.params.userName == ''){
					_showToast('请输入真实姓名')
					return
				}
				if(this.params.idCard == ''){
					_showToast('请输入本人身份证号码')
					return
				}
				if(this.params.mobileNo == ''){
					_showToast('请输入常用手机号码')
					return
				}
				if(this.params.smsCode == ''){
					_showToast('请输入手机验证码')
					return
				}
				if(!isCardId(this.params.idCard, this)){
					return
				}
				updateIDCard({
					loginOrgId: this.userInfo.orgId?this.userInfo.orgId:'',
					appId: '',
					userId: this.userId,
					xuserId: '',
					...this.params
				}).then(res => {
					if (res.resultCode === 0) {
						this.title = '提示'
						this.content = '实名认证成功!'
						this.okBtn = '确定'
						this.showMcModal = true
						this.type = 'pageBack'
					} else {
						this.title1 = '提示'
						this.content1 = res.resultMsg
						this.showMcModal1 = true
					}
				}).catch(err => {
					this.title1 = '温馨提示'
					this.content1 = '系统错误!'
					this.showMcModal1 = true
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: #FFF;
	}

	.r_content {
		display: flex;
		justify-content: center;
	}

	.login_box {
		width: 89%;
		margin-top: 50rpx;
	}

	.account-txt {
		font-size: 24rpx;
	}

	.txt1 {
		color: rgb(74, 74, 74);
		font-weight: 500;
		width: 150rpx;
		font-size: 28rpx;
	}

	.btn_pri {
		width: 566rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		border-radius: 9rpx;
		margin-top: 50rpx;
		line-height: 96rpx;
	}

	.uni-input {
		display: flex;
		flex: 1;
		border: none;
		padding: 10rpx;
	}

	.form_box {
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.input_box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1rpx solid #E6E6E6;
		padding: 22rpx;
		line-height: 88rpx;
		box-sizing: border-box;
	}

	.register_yzm {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border: 1px solid red;
	}

	.register_yzms {
		width: 200rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		text-align: center;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #185AFF;
		color: #185AFF;
		
		&.register_disabled {
			border: 1px solid #f6f6f6;
			color: #999;
		}
	}


	.input_yzm {
		width: 290rpx;
		padding: 10rpx;
	}

	.yzm {
		width: 190rpx;
		height: 50rpx;
	}
	.tips {
		font-size: 28rpx;
		color: red;
	}
	.save_btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
